<template>
  <div>
    <button @click="flag='MyInfo'">切换</button>
     <MyInfo v-if="flag==='MyLogin'"></MyInfo>
     <MyLogin v-else-if="flag==='MyInfo'"></MyLogin>

     <hr>
   <button @click="flagg='MyInfo'">切换</button>
   <component :is="flagg"></component>
  <input type="text"  v-focus ref="abc" >
  <p v-aaa v-bbb="color">颜色</p>
  <hr>
  <input type="text" v-model="msg" v-test="msg">
  <div>
    <button @click="conName='UserName'">账号密码</button>
    <button @click="conName='UserInfo'">个人信息</button>
  </div>
  <p>下面具体组件</p>
  <UserName v-if="conName==='UserName'"></UserName>
  <UserInfo v-if="conName==='UserInfo'"></UserInfo>
  <components :is="conName"></components>
  <div class="box" v-left="500"></div>
  <div v-active="2">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
  </div>
  </div>
   
</template>
 
<script>
import  MyInfo from './components/MyInfo'
import MyLogin from './components/MyLogin.vue'
import UserName from './components/UserName.vue'
import UserInfo from './components/UserInfo.vue'
export default {
  mounted(){
    this.$refs.abc.focus()
  },
  name: "App",
  components: {
    MyInfo,
    MyLogin,
    UserName,
    UserInfo,
  },
  props: {},
  data() {
    return {
      flag:'MyLogin',
      flagg:'MyLogin',
      color:'lightblue',
      msg:'',
      conName:'UserName'
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {},
  directives:{
    focus:{
      inserted(el){
        el.focus()
      }
    },
    heigth:{
      inserted(el,binding){
        el.style.height=binding.value
      }
    },
    test:{
      update(el,binding){
        el.style.color=binding.value.trim().length>=4&&binding.value.trim().length<=7
        ?'lightblue'
        :'lightpink'
      }
    }
  }
};
</script>

<style scoped>
     .box{
      width: 200px;
      height: 200px;
      background: lightblue;
     }
</style>